<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.supplyId"
        filterable
        class="filter-item"
        clearable
        placeholder="请选择商户"
      >
        <el-option
         v-for="item in supplyList"
          :label="item.company"
          :value="item.id"
        />
      </el-select>
      <el-input
        v-model="listQuery.phone"
        placeholder="请输入手机号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <!-- <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        导出
      </el-button> -->
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate()"
      >
        添加记录
      </el-button>
    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="支付时间"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.created }}
        </template>
      </el-table-column>
      <el-table-column
        prop="supplyCompany"
        label="商户名称"
        align="center"
        width=""
      />
      <!--<el-table-column-->
      <!--v-if="isAdmin"-->
      <!--prop="supplyName"-->
      <!--label="负责人"-->
      <!--align="center"-->
      <!--width=""-->
      <!--/>-->

      <el-table-column
        prop="supplyPhone"
        label="联系电话"
        align="center"
        width=""
      />

      <el-table-column
        prop="copeMoney"
        label="应付金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="payMoney"
        label="支付金额"
        align="center"
        width=""
      />
      <!--<el-table-column-->
      <!--prop="debMoney"-->
      <!--label="欠款"-->
      <!--align="center"-->
      <!--width=""-->
      <!--/>-->

      <el-table-column
        label="欠款"
        width=""
        align="center">
        <template slot-scope="scope">
          {{ scope.row.copeMoney - scope.row.payMoney}}
        </template>
      </el-table-column>

      <el-table-column
        label="操作人"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.handleUserName }}
        </template>
      </el-table-column>

      <el-table-column
        prop="voucher"
        label="凭证信息"
        min-width=""
        align="center"
      />

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="添加记录"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="680px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="110px"
        style="width:550px; margin-left:50px;"
      >
        <el-form-item
          label="商户"
          prop="supplyId"
        >
          <el-select
            v-model="temp.supplyId"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择商户"
            style="width:440px"
            @change="chosePayMoney"
          >
            <el-option
              v-for="item in supplyList"
              :label="item.company"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="应付金额"
          prop="copeMoney"
        >
          <el-input disabled v-model="temp.copeMoney"/>
        </el-form-item>

        <el-form-item
          label="支付金额"
          prop="payMoney"
        >
          <el-input v-model="temp.payMoney "/>
        </el-form-item>

        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input v-model="temp.remark"/>
        </el-form-item>

        <el-form-item
          label="凭证"
          prop="voucher"
        >
          <el-input
            v-model="temp.voucher"
            style="display:none"
          />
          <addImgall
            ref="mychild"
            :image-url="temp.voucher "
            @imgUrl="getImg1"
          />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="createData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>

    </el-dialog>

  </div>
</template>
<script>
  const defaultFormThead = ["apple", "banana"];
  import {getManyList, daoZhang, addDZ, getAllBusinessByParentId} from "@/api/v1";
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import addImgall from "@/components/img";

  export default {
    directives: {waves},
    components: {Pagination, addImgall},
    filters: {
      stateFilter(role) {
        switch (role) {
          case 0:
            return "转账中";
          case 1:
            return "到账成功";
          case 2:
            return "到账失败";
        }
      }
    },
    data() {
      return {
        supplyList: [],
        isAdmin: true,
        tableData: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          supplyId: null,
          page: 1,
          limit: 20,
          sort: "+id",
          phone: "",
          startDay: "",
          endDay: ""
        },
        rules: {
          supplyId: [
            {required: true, message: '请选择所属省代', trigger: 'change'}
          ],
          voucher: [{required: true, message: "请上传图片", trigger: "change"}],
          remark: [{required: true, message: "请输入备注", trigger: "blur"}],
          copeMoney: [
            {required: true, message: "请输入应付金额", trigger: "blur"}
          ],
          payMoney: [{required: true, message: "请输支付金额", trigger: "blur"}]
        },
        temp: {
          copeMoney: "",
          payMoney: "",
          remark: "",
          voucher: "",
          supplyId: null
        },
        dialogFormVisible: false,

        key: 1, // table key
        formTheadOptions: ["apple", "banana", "orange"],
        checkboxVal: defaultFormThead, // checkboxVal
        formThead: defaultFormThead // 默认表头 Default header
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },
    created() {
      const id = this.$route.query.id;
      this.listQuery.cooperation = id;
      console.log(id);
      this.getList();
      getAllBusinessByParentId().then(res => {
        this.supplyList = res.data;
      });
      if (checkPermission(["admin"])) {
      } else {
        this.isAdmin = false;
      }
    },
    methods: {
      resetTemp() {
        this.temp = {
          copeMoney: "",
          payMoney: "",
          remark: "",
          voucher: ""
        };
      },
      getImg1(data) {
        console.log(data);
        console.log(this);
        this.temp.voucher = data;
      },
      handleCreate() {
        this.resetTemp();
        console.log(this.temp);
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
        // this.$refs.provinceData.clearProvinceDate();
      },
      handleDownload() {
        down(this.listQuery).then(res => {
          console.log(res);
          this.$router.push({
            path: "/down"
          });
        });
      },
      getList() {
        this.listLoading = true;
        daoZhang(this.listQuery).then(res => {
          this.tableData = res.data.records;
          this.total = Number(res.data.total);
          console.log(this.tableData);
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      },
      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            addDZ(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 2000
              });

              this.getList();
              getAllBusinessByParentId().then(res => {
                this.supplyList = res.data;
              });
            });
          }
        });
      },
      chosePayMoney: function (id) {

        for (var i = 0; i < this.supplyList.length; i++) {
          if (id == this.supplyList[i].id) {
            this.temp.copeMoney = this.supplyList[i].payMoney - this.supplyList[i].driverPayMoney
            break;
          }
        }
      },

      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      }
    }
  };
</script>

